自我挑戰的第三天，GOGOGO

Day3: 無限清單（Infinite Scroll）

• 是用在長清單的狀況下，可能清單項目長度未知或是想要加快最初的畫面渲染，所以先載入一部分，然後讓使用者可以往下滾動頁面。
• 使用者捲動到清單畫面底部時，可以使用載入更多(load more)的按鈕或是自動觸發加載更多內容。
• 以前端工程來說，這樣的方式稱之為延遲載入（lazy loding)。

以React為範例，我們可以使用React.lazy() and React.Suspense來自己刻，
或是使用其他人已經寫好的library，
例如：
https://www.npmjs.com/package/react-lazy-load-image-component

Facebook的塗鴉牆就是以這種無限清單的模式不斷載入更多內容，Twitter也是如此的應用模式，讓使用者可以不斷滑滑滑發現新的娛樂內容。

But!！

商品類別的可能使用這樣的模式會造成使用者的些微困擾，
如果滑到一半跳掉，下次要再進來時就無法直接找到該商品，
或是要記得所需商品在第幾頁，使用者需要導航的情況下，無限清單自動不斷載入的方式可能就不是非常的合適。
（感覺就跟百貨公司的手扶梯有的會強迫你繞一圈瀏覽更多櫃位一樣煩躁）

例如：某手機殼的網站，當滾到清單最底下時，會出現一個loading的icon，等待數秒後會載入更多，但這樣的無限清單滾著滾著到最後我就迷路了？（剛剛可愛的手機殼呢？啊不見了找不到了，好煩呀～～）

但這個確實是應用到了這個無限清單模式...或許可以加上一個load more的按鈕，讓使用者增加控制與導航的感覺。

本日結語：其實我覺得商品類別利用頁碼來標註（Pagination）分頁瀏覽會比較合適，可能之後有空就來寫這個好了。